<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        button{
            border:1px solid rgb(154,154,154);
            border-radius:2px;
            box-shadow:inset 0 2px 0 rgb(190,190,190);
            background: linear-gradient(rgb(184,184,184), rgb(206,206,206));
            font-size:18px;
            padding:8px 0;
            margin:3px 0;
        }
        button:focus,button:hover{
            outline:none;
            box-shadow:inset 0 2px 0 rgb(253,173,110);
            border:1px solid rgb(223,84,12);
            background: linear-gradient(rgb(253,144,60), rgb(253,120,45));
        }
        .mainBox{
            display:flex;
        }
        .mainBox div{
            display:flex;
            flex:1;
            flex-direction:column;
            padding:6px;
            text-align:center;
            border:1px solid rgba(190,190,190,0.6);
            border-radius:6px;
            margin:0 3px 0 3px;
        }
        .mainBox div span{
            font-size:20px;
        }
        
    </style>
</head>
<body>
    <div id="mainDivId" class="mainBox"></div>
    <script>
        var bottomMsg   = "";
        var moreBt      = "";
        try{
            bottomMsg = JSON.parse(window.ButtonAgent.getBtnInfo());            //获取底部图标
        }catch(e){}
        var callBt = "",reserverBt = "";
        try{
            var topAppName = window.ButtonAgent.getTopAppName();
        }catch(e){}
        var lang = "zh_CN";
        try{
            lang = window.ButtonAgent.getDeviceLanguage();
        }catch(e){}
        if(lang == "en"){
            guestAct    = "Guest Operation";
            consumeLang = "Fruits& Beverage";
            therap      = "Health Care Items";
            billQuery   = "Bill Query";
            NormalOper  = "Normal Operation";
            HomePage    = "Back to Homepage";
            swichLang   = "Switch Language";
            staffO      = "Staff Operation";
            atWork      = "上钟";
            offWork     = "下钟";
            callLang    = "Call";
            noCallLang  = "Cancel";
            reserLang   = "Reserve";
        }else if(lang == "zh_TW"){
            guestAct    = "客人操作";
            consumeLang = "水果飲品";
            therap      = "保健項目";
            billQuery   = "賬單查詢";
            NormalOper  = "常規操作";
            HomePage    = "返回主頁";
            swichLang   = "切換語言";
            staffO      = "員工操作";
            atWork      = "上钟";
            offWork     = "下钟";
            callLang    = "呼叫";
            noCallLang  = "取消呼叫";
            reserLang   = "留位";
        }else{
            guestAct    = "客人操作";
            consumeLang = "水果饮品";
            therap      = "保健项目"
            billQuery   = "账单查询";
            NormalOper  = "常规操作";
            HomePage    = "返回主页";
            swichLang   = "切换语言";
            staffO      = "员工操作";
            atWork      = "上钟";
            offWork     = "下钟";
            callLang    = "呼叫";
            noCallLang  = "取消呼叫";
            reserLang   = "留位";
        }
        if(bottomMsg){
            for(var i=0;bottomMsg[i];i++){
                var iocName = bottomMsg[i].name;
                var inShow  = bottomMsg[i].enable;
                if(iocName == "呼叫" && inShow){
                    var status = "";
                    try{
                        status = window.ButtonAgent.getCallStatus();
                    }catch(e){}
                    var callText = "";
                    if(status == "on"){
                        callText = noCallLang;
                    }else{
                        callText = callLang;
                    }
                    callBt = '<button id="bt_CallId" onclick="window.ButtonAgent.callFunc(\'呼叫\');window.ButtonAgent.hideWindows()">' + callText + '</button>';
                }else if(iocName == "留位" && inShow){
                    reserverBt = '<button onclick="javascript: window.ButtonAgent.callFunc(\'留位\');window.ButtonAgent.hideWindows()">' + reserLang + '</button>';
                    moreBt     = '<button onclick="javascript:window.ButtonAgent.serviceInf(\'6\')">更多</button>';
                }
            }
        }
        var langHtml = '<button onclick="javascript: window.ButtonAgent.changeLanguage()">' + swichLang + '</button>';
        var contentHtml = '<div><span>' + NormalOper + '</span><button onclick="javascript: window.ButtonAgent.backHome()" >' + HomePage + '</button>' + callBt + reserverBt +langHtml+'</div>';
        contentHtml += '<div><span>' + guestAct + '</span><button onclick="javascript: window.ButtonAgent.serviceInf(\'1\')">' + consumeLang + '</button><button onclick="javascript: window.ButtonAgent.serviceInf(\'2\')" >' + therap + '</button><button onclick="javascript: window.ButtonAgent.serviceInf(\'3\')">' + billQuery + '</button></div>';
        contentHtml += '<div><span>' + staffO + '</span><button onclick="javascript: window.ButtonAgent.serviceInf(\'4\')">' + atWork + '</button><button onclick="javascript: window.ButtonAgent.serviceInf(\'5\')">' + offWork + '</button>' + moreBt + '</div>';
        document.getElementById("mainDivId").innerHTML = contentHtml;
        
        function getCallStatus(){
            if(document.getElementById("bt_CallId")){
                var status = "";
                try{
                    status = window.ButtonAgent.getCallStatus();
                }catch(e){}
                if(status == "on"){
                    document.getElementById("bt_CallId").textContent = noCallLang;
                }else{
                    document.getElementById("bt_CallId").textContent = callLang;
                }
            }
        }
        setInterval(getCallStatus,1000);
    </script>
</body>
</html>